<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div style="line-height: 0">
      <el-row :gutter="10">
        <el-col :span="24">
          <span>用户预约信息：</span>
          <el-button type="primary" round @click="showAddApt()"
            >增加场地预约</el-button
          >
        </el-col>
      </el-row>
      <el-table
        class="tableBorder"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '20px' }"
        :data="tableData"
        style="width: 100%; margin-top: 30px"
        :stripe="true"
        :border="true"
        :highlight-current-row="true"
        size="mini"
      >
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="userName" label="用户姓名"> </el-table-column>
        <el-table-column
          prop="userPhone"
          label="用户联系方式"
        ></el-table-column>
        <el-table-column prop="area.areaPosition" label="场地信息">
          <template slot-scope="scope">
            {{ scope.row.area.areaPosition }}- {{ scope.row.area.areaFloor }}层
            {{ scope.row.area.areaDetail }}号
            <span v-if="scope.row.area.areaType === '2'" style="color: #37b328"
              ><el-tag type="success">篮球场</el-tag></span
            >
            <span v-if="scope.row.area.areaType === '3'" style="color: #37b328"
              ><el-tag type="success">乒乓球场</el-tag></span
            >
            <span v-if="scope.row.area.areaType === '4'" style="color: #37b328"
              ><el-tag type="success">羽毛球/网球场</el-tag></span
            >
            <span v-if="scope.row.area.areaType === '5'" style="color: #37b328"
              ><el-tag type="success">足球场</el-tag></span
            >
            <span v-if="scope.row.area.areaType === '6'" style="color: #37b328"
              ><el-tag type="success">排球场</el-tag></span
            >
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="预约时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
      </el-table>
      <el-dialog
        title="增加订单"
        :visible.sync="dialogFormVisible"
        append-to-body
        @open="open()"
      >
        <el-form>
          <el-form-item label="选择场地类型: " :label-width="formLabelWidth">
            <el-select
              v-model="filters.value1"
              placeholder="请选择地点类型"
              size="mini"
              @change="getareaType($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择预约场地: " :label-width="formLabelWidth">
            <el-select v-model="filters.value2" placeholder="请选择地点: " size="mini" @change="getareaId($event)">
              <el-option
                v-for="item in areaopt"
                :key="item.id"
                :label="item.areaAddrs"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="填写联系人: " :label-width="formLabelWidth">
              <el-input
                v-model="appointmentVO.userName"
                autocomplete="off"
                placeholder="请输入联系人"
              ></el-input>
            </el-form-item>
          <el-form-item label="填写联系方式: " :label-width="formLabelWidth">
              <el-input
                v-model="appointmentVO.userPhone"
                autocomplete="off"
                placeholder="请输入联系方式"
              ></el-input>
            </el-form-item>
          <el-form-item label="选择预约日期: " :label-width="formLabelWidth">
            <el-date-picker
              v-model="value1"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              size="mini"
              timestamp
              @change="getAptData"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="选择预约时间: " :label-width="formLabelWidth">
            <el-time-select
              size="mini"
              placeholder="起始时间"
              v-model="startTime"
              @change="getAptSTime"
              value-format='HH:mm'
              :picker-options="{
                start: '09:00',
                step: '02:00',
                end: '18:00',
              }"
            >
            </el-time-select>
            <el-time-select
              size="mini"
              placeholder="结束时间"
              v-model="endTime"
              @change="getAptETime"
              value-format='HH:mm'
              :picker-options="{
                start: '10:00',
                step: '01:00',
                end: '20:00',
                minTime: startTime,
              }"
            >
            </el-time-select>
            
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addApt">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      appointment: {
        id: 0,
        userId: 6,
        userName: "",
        userPhone: "",
        siteId: 12,
        appointmentDate: 1666683027589,
        startTime: 1666683027589,
        endTime: 1666683027592,
      },
      appointmentVO:{
        userId: 0,
        siteId: 0,
        userName: "",
        userPhone: "",
        appointmentDate: "",
        stime: "",
        etime: "",
      },
      area: {
        id: 2,
        areaType: "",
        areaPosition: "",
        areaFloor: 1,
        areaDetail: "",
        holdPeople: 100,
        areaState: "",
      },
      options: [
        {
          value: "2",
          label: "篮球场",
        },
        {
          value: "3",
          label: "乒乓球场",
        },
        {
          value: "4",
          label: "羽毛球/网球场",
        },
        {
          value: "5",
          label: "足球场",
        },
        {
          value: "6",
          label: "排球场",
        },
      ],
      areaopt: [
        {
          id: "",
          areaAddrs: "",
        },
      ],
      filters: {
        value1: '',
        value2: ''
      },
      tableData: [],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      startTime: "",
      endTime: "",
      value1: "",
    };
  },
  created() {
    this.aptList();
    
  },
  methods: {
    //获取场地id
    getareaId(e){
      console.log(e);
      this.appointmentVO.siteId = e;
    },
    //获取场地类型
    getareaType(e) {
      console.log(e);
      this.area.areaType = e;
      this.areaList(this.area);
    },
    //获取日期
    getAptData(val){
      console.log(val);
      this.appointmentVO.appointmentDate = val;
    },
    //获取开始预约时间
    getAptSTime(val){
      console.log(val);
      this.appointmentVO.stime = val;
    },
    //获取结束预约时间
    getAptETime(val){
      console.log(val);
      this.appointmentVO.etime = val;
    },
    //增加预约信息
    addApt() {
      //当前用户id
      this.appointmentVO.userId = 6;
      console.log("增加预约");
      this.$axios
        .post("api/lot/apt/add", this.appointmentVO)
        .then((r) => {
          console.log(r.data);
          this.closeApt(); //关闭信息弹出窗
        });
    },
    //展示增加预约信息弹出窗
    showAddApt() {
      this.dialogFormVisible = true;
    },
    //关闭信息弹出窗
    closeApt() {
      this.dialogFormVisible = false;
    },
    //表格数据
    aptList() {
      this.$axios.post("api/lot/apt/getAll").then((r) => {
        console.log(r.data.data);
        this.tableData = r.data.data;
      });
    },
    //获取场地信息
    areaList(area) {
      this.$axios.post("api/lot/area/getAreaType", area).then((r) => {
        console.log(r.data.data);
        this.areaopt = r.data.data;
      });
    },
    //open
    open() {
      //$nextTick() 该钩子函数执行时所有的DOM 挂载和渲染都已经完成， 此时在该钩子函数中进行任何操作都不会有问题。
      this.$nextTick(() => {
        console.log("钩子函数");
      });
    },
  },
};
</script>